<template>
    <el-card class="box-card" :body-style="{ height: '100%' }">
        <template #header>
            <div class="card-header">
                <div>
                    <div class="colorBar"></div>
                    <div>{{ title.text }}</div>
                </div>
                <div class="legendData">
                </div>
                <div>
                    更多
                </div>
            </div>
        </template>
        <div id="cricle" style="width: 100%; height: 500px"></div>
    </el-card>
</template>
  
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, onUpdated, reactive, ref, type VNodeRef, watch } from 'vue';
import { userDashoardMonthApi, userDashoardWeekApi, userDashoardDayApi } from '@/services/dashoard'
import { deepCopy } from '@/utils/Tools/deepCopy';

onMounted(async () => {
    const myChart = echarts.init(document.getElementById('cricle'));
    updateChart(myChart);
});
const title = reactive({ text: '部门业绩占比(万元) ' });
const updateChart = (myChart: echarts.ECharts) => {
    myChart.setOption({
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: 'Nightingale Chart',
                type: 'pie',
                radius: [50, 200],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 10
                },
                data: [
                    { value: 40, name: '市场一部' },
                    { value: 38, name: '市场二部' },
                    { value: 32, name: '市场三部' },
                    { value: 30, name: '市场四部' },
                    { value: 28, name: '市场五部' },
                    { value: 26, name: '市场六部' },
                ]
            }
        ]
    });
}

</script>
  
<style lang="scss" scoped>
.el-card {
    margin-bottom: 20px;
    width: 100%;

    .el-card__header {
        border-bottom: 0;
        padding: 0;
        margin-left: 10px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-self: center;

        div {
            display: flex;
            justify-content: space-between;
            align-self: center;
        }

        .card-header {
            .colorBar {
                width: 4px;
                height: 15px;
                background-color: #367eea;
                margin-right: 10px;
            }

            li {
                float: left;
            }

            .legendData {
                cursor: pointer;
            }

            .liColor {
                width: 20px;
                height: 10px;
                // background-color: red;
                cursor: pointer;
                margin: 0 10px;
            }
        }
    }


}

.el-card__body {
    height: 100%;
}
</style>
  